<style>
	.userBranchBox {
		width: 750rpx;
		background: #fff;
		overflow: hidden;
	}
	
	.userBranch {
		width: 100%;
		height: 78rpx;
		border-bottom: 2rpx solid #f2f2f2;
		line-height: 78rpx;
		box-sizing: border-box;
		float: right;
		padding-left: 20rpx;
	}
	.userBranch view {
		display: inline-block;
	}
	.userBranch view image {
		vertical-align: middle;
	}
	.branchTxt {
		font-size: 26rpx;
	}
	.goRight {
		width: auto;
		height: 100rpox;
		float: right;
	}
	.goRight image {
		width: 38rpx;
		height: 38rpx;
	}
	.change_newest{
		margin-right: 20rpx;
		color: #eb1b1b;
	}
	.mammon_input input{
		border: 1px solid #cccccc;
		text-align: center;
		width: 180rpx;
	}
	.mammon_input text{
		color: #333333;
		font-size: 28rpx;
	}
	.displace-order{
		width: 690rpx;
		margin: 0 auto;
	}
	.displace-order .d-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #313131;
		font-size: 30rpx;
		height: 90rpx;
	}
	.order-cont{
		border: 1px solid #CCCCCC;
		background-color: #FFFFFF;
	}
	.order-cont .order-no{
		border-bottom: 2px solid #CCCCCC;
		line-height: 56rpx;
		background-color: #f1f1f1;
		font-size: 28rpx;
		color: #808080;
		padding-left: 22rpx;
	}
	.order-cont .order-prod{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding: 20rpx 0;
		position: relative;
	}
	.order-prod .info{
		width: 395rpx;
		margin: 0 12rpx;
	}
	.order-prod .pimg{
		width: 102rpx;
		height: 135rpx;
	}
	.order-prod .title{
		color: #222222;
		font-size: 30rpx;
		height: 80rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.order-prod .gay{
		color: #828282;
		font-size: 28rpx;
	}
	.order-prod .price{
		color: #212121;
		font-size: 28rpx;
	}
	.order-remark{
		width: 690rpx;
		margin: 30rpx auto;
	}
	.displace-order-list{
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		z-index: 12;
		transform: translateY(100%);
		transition: .3s;
		padding: 15rpx 0;
	}
	.displace-order-list .list-title{
		text-align: center;
		line-height: 68rpx;
		color: #313131;
		font-size: 32rpx;
		position: relative;
	}
	.displace-order-list .list-title .cancel{
		position: absolute;
		right: 35rpx;
		top: 0rpx;
		line-height: 68rpx;
	}
	.displace-order-list .list-cont{
		width: 715rpx;
		margin: 0 auto;
	}
	.displace-order-list .list-cont .order-cont{
		margin-top: 20rpx;
	}
	.displace-order-list .list-cont .info{
		width: 400rpx;
	}
	.displace-order-list .list-cont .action{
		position: absolute;
		bottom: 7rpx;
		right: 13rpx;
		width: 44rpx;
		height: 40rpx;
	}
</style>
<template>
    <view class='page'>
        <view class="g-address">
            <view class="m-address-info" @tap="chooseAddress">
                <view v-if="isAddress" class="m-no-address">点击添加收货地址</view>
                <view v-if="!isAddress" class="m-address-info-l">
                    <view class="m-address-info-t">
                        <view class="u-address-name">{{addressData.realname}}</view>
                        <view class="u-address-mobile">{{addressData.mobile}}</view>
                    </view>
                    <view class="u-address-content">{{addressData.province_text+addressData.city_text+addressData.zone_text+addressData.address}}</view>
                </view>
                <view class="m-address-info-r">
                    <arrow size="50" color="#656565" direction="right"></arrow>
                </view>
            </view>
			<image src="../../../static/icons/jewel/addr_bg.png" mode="" class='m-address-bg'></image>
        </view>

        <!-- 商品详情 -->
        <view class='good-box'>
            <view class='common'>
                <view class='common-box content-box'>
                    <view class='com-name'>广东恒朗</view>
                    <view class='com-contact'>
                        <button open-type="contact" class='contact'>
                            <image src='../../../static/icons/jewel/order_msg.png'></image> 联系商家
                        </button>
                    </view>
                </view>
            </view>
            <!--珠宝-->
            <view class='good'>
                <view class='lease content-box'>
                    <view class='lease-img'>
                        <image :src='order.photo'></image>
                    </view>
                    <view class='lease-info'>
                        <view class='lease-title'>{{order.goods_name}}</view>
                        <view class='lease-attr font-color-hs'>{{order.item_names}}</view>
                    </view>
                    <view class='lease-price'>
                        <view>¥{{order.shop_price}}</view>
                        <view class='lease-num font-color-hs'>x{{buy_number}}</view>
                    </view>
                </view>
            </view>
			
			<view class="displace-order">
				<view class="d-title"><text>置换订单</text><text @tap="chooseOrder">选择订单></text></view>
				<view class="order-cont">
					<view class="order-no">订单 00002515245623522</view>
					<view class="order-prod">
						<view><image :src='order.photo' class="pimg"></image></view>
						<view class="info"><text class="title">同心（情侣对戒，一对价格）</text><text class="gay">10号款式定价</text></view>
						<view><text class="price">￥8175.00</text><br><text class="gay">X1</text></view>
					</view>
				</view>
			</view>
			
            <view class='order-remark'>
                <input placeholder="有特别需求的，可以在这里填写喔~" class='input-content' @blur="log_content" />
            </view>
        </view>
		
        <view class="total_price">
			<view class="price_box">
				<view class="single_price">
					<view class="price_title">
						置换宝贝金额
					</view>
					<view class="price single_price_text">
						¥{{order.shop_price}}
					</view>
				</view>
				<view class="single_price">
					<view class="price_title">
						原订单金额
					</view>
					<view class="price single_price_text">
						*{{buy_number}}
					</view>
				</view>
			</view>
            <view class="total_pay single_price_text">
            	实付差价：¥{{mammon_total}}
            </view>
        </view>
		<view class="pay-btn-bg"></view>
		<view class="pay-btn" @tap="payBtn">确认支付</view>
		
		<view class="u-popup-mask" v-if="payPop" @tap="payBtn" @touchmove.stop=""></view>
		<view class="pay_type_box" :class="[payPop?'z-show':'']">
			<view class="pay-title">请选择支付方式</view>
			<view v-for="(item, index) in payList" :key="index">
				<!-- #ifdef APP-PLUS -->
					<view class="pay_type" v-if="item.type == 'alipay'" @tap="pay(item.type)">
						<view class="left"><image :src="item.icon_text" class="icon_text"></image>{{item.name}}</view>
						<image class="arrow" v-if="paytype == item.type" src="../../../static/icons/pay-select-act.png"></image>
					</view>
				<!-- #endif -->
				<view class="pay_type" @tap="pay(item.type)" v-if="item.type != 'alipay' && item.type != 'granary'">
					<view class="left"><image :src="item.icon_text" class="icon_text"></image>{{item.name}}</view>
					<image class="arrow" v-if="paytype == item.type" src="../../../static/icons/pay-select-act.png"></image>
				</view>
			</view>
		</view>
		
		<!-- 选择置换订单 -->
		<view class="u-popup-mask" v-if="showDisplace" @tap="chooseOrder" @touchmove.stop=""></view>
		<view class="displace-order-list" :class="[showDisplace?'z-show':'']">
			<view class="list-title">选择订单<text class="cancel" @tap="chooseOrder">取消</text></view>
			<view class="list-cont">
				<view class="order-cont">
					<view class="order-no">订单 00002515245623522</view>
					<view class="order-prod">
						<view><image :src='order.photo' class="pimg"></image></view>
						<view class="info"><text class="title">同心（情侣对戒，一对价格）</text><text class="gay">10号款式定价</text></view>
						<view><text class="price">￥8175.00</text><br><text class="gay">X1</text></view>
						<image src="../../../static/icons/jewel/displace-off.png" class="action"></image>
					</view>
				</view>
				<view class="order-cont">
					<view class="order-no">订单 00002515245623522</view>
					<view class="order-prod">
						<view><image :src='order.photo' class="pimg"></image></view>
						<view class="info"><text class="title">同心（情侣对戒，一对价格）</text><text class="gay">10号款式定价</text></view>
						<view><text class="price">￥8175.00</text><br><text class="gay">X1</text></view>
						<image src="../../../static/icons/jewel/displace-off.png" class="action"></image>
					</view>
					
				</view>
			</view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
    </view>
</template>
<script>
    import hl from '@/common/common_zb.js';
    export default {
        data() {
            return {
                goods_id: 0,    // 商品id
                choose_item_id: 0,  // 规格id
                buy_number: 1,  // 购买件数
                order: [],  // 订单信息
                isAddress: false,
                addressData: {}, // 地址信息
                addressId: '',  // 地址id
				order_no: 0,	// 订单id（首次点击支付会生成订单id，或从订单列表进来）
				payList: [],	// 支付方式列表
				order_content: '',	// 订单备注
				order_total: 0,	// 订单总价格
				bIsShowLoading: false,
				chuangke_num: '',
				options: {},
				idcard_name: '',	// 身份证名称
				idcard_num: '',	// 身份证号码
				payPop: false,
				bIsShowFefund: false,
				isGoodType:hl.isGoodsTpye(),
				mammonNum: '',
				mammonTraffic:0,
				mammon_total:0,
				paytype:'',
				showDisplace:false
            }
        },
        onLoad(options) {
            let that = this;
			that.options = options;
            that.goods_id = options.goods_id;
            that.choose_item_id = options.choose_item_id;
			that.bIsShowLoading = true;
			let address_id = options.address_id;
			if(address_id) {
				hl.get('member/address_view',{id: address_id},true,function(res){
					that.addressData = res.data.data;
					that.addressId = address_id;
				});
				
			}else{
				hl.get('member/address',{},true,function(res){
				    if (!res.data.data.length) {
				        that.isAddress = true
				        return false;
				    }
				    that.addressData = res.data.data[0];
					that.addressId = that.addressData.id;
				});
			}
			var loadData = {};
			if(options.order_no) {
				that.order_no = options.order_no;
				loadData = {order_no: this.order_no};
			}else{
				loadData = {choose_item_id: options.choose_item_id, goods_id: options.goods_id, buy_number: options.buy_number};
			}
			new Promise((resolve, reject) => {
			    hl.get('goods/getOrderInfo', loadData, true, function(res){
			        let res_data = res.data;
			        if(res_data.code == '-1') {
			            hl.showToast(res_data.msg)
			            setTimeout(function (){
			                uni.navigateBack();
			            }, 1000)
			        }else{
			            let resdata = res_data.data;
			            that.buy_number = resdata.buy_number;
						that.mammonTraffic = resdata.traffic;
			            that.order = resdata;
						that.order_total = that.mammon_total = (resdata.order_total).toFixed(2);
						if(resdata.cardinfo != null) that.idcard_name = resdata.cardinfo.realname;
						if(resdata.cardinfo != null) that.idcard_num = resdata.cardinfo.idcard;
						if(that.chuangke_num != '0') that.chuangke_num = resdata.chuangke_num;
			    		resolve();
			        }
			    })
			}).then(() => {
				hl.get('Payment/payList', {goods_id:that.goods_id}, true, function (res){
					that.payList = res.data.data;
					that.bIsShowLoading = false;
				})
			})
			
			
        },
        methods: {
			mamInput(e){
				let that = this
				let val = e.target.value
				if(Number(val) > Number(that.mammonTraffic)){
					uni.showToast({
						icon:'none',
						title:'超过可用流量'
					})
				}else{
					hl.post('order/count_price', {order_total:that.order_total,traffic:val}, true, function (res){
						that.mammon_total = res.data.data.order_total
					})
				}
			},
			// 选择地址
			chooseAddress(){
				var url = '/pages/user/settings/address/address?';
				if(this.order_no) {
					url+= 'order_no='+ this.order_no;
				}else{
					url+= 'choose_item_id='+this.choose_item_id+'&goods_id='+this.goods_id+'&buy_number='+this.buy_number
				}
				uni.navigateTo({
					url: url
				})
			},
			// 支付
			pay(paytype){
				let that = this;
				that.payPop = false;
				
				that.paytype = paytype
				// #ifdef H5
				var source = 1;	// 公众号
				// #endif
				// #ifdef APP-PLUS
				var source = 2;	// App
				// #endif
				// #ifdef MP-WEIXIN
				var source = 3;	// 小程序
				// #endif
			
				var loadData = {
					type: paytype, source: source, chuangke_num: that.chuangke_num,
					idcard_name: that.idcard_name, idcard_num: that.idcard_num,
					order_content: that.order_content,traffic:that.mammonNum,
				};
				if(that.order_no) {
					loadData.order_no = that.order_no;
				}else{
					loadData.goods_id = that.goods_id;
					loadData.choose_item_id = that.choose_item_id;
					loadData.buy_number = that.buy_number;
					loadData.address_id = that.addressId;
				}
				
				uni.showModal({
					title: '提示',
					content: '确认享用该订单吗',
					success: function (res) {
						if (res.cancel) {
							return false
						}
						if (res.confirm) {
							that.bIsShowLoading = true;
							hl.post('Order/order', loadData, true, function (res){
								that.bIsShowLoading = false;
								let data = res.data;
								if(data.code =='-1'){
									hl.showToast(data.msg, 1500);
								}else if(data.code == '-2'){	// 如果订单信息不存在，返回首页
									setTimeout(function (){
										uni.switchTab({
											url: '/pages/jewel/index/index'
										})
									}, 1000)
								}else{
									that.chuangke_num = '';
									that.order_no = data.data.order_no;
									switch (loadData.type) {
									    case 'wxpay':
										case 'alipay':
											let pay_data = data.data.paydata;
									        uni.requestPayment({
									            provider: loadData.type,
									            orderInfo: pay_data,
												// #ifdef MP-WEIXIN
												nonceStr: pay_data.nonceStr,
												timeStamp: pay_data.timeStamp,
												package: pay_data.package,
												signType: pay_data.signType,
												paySign: pay_data.paySign,
												// #endif
									            success: (res) => {
									                hl.showToast('支付成功', 1500);
									                uni.reLaunch({
									                	url:'/pages/jewel/order/ordersuccess?order_no='+that.order_no
									                })
									            },
									            fail: (res) => {
									                hl.showToast('支付失败');
									            },
												complete:(res)=>{
												}
									        })
									        break;
										case 'qian_pay':
									    case 'jewel_granary':
											if (data.code == 3) {
											    setTimeout(() => {
											        uni.reLaunch({
											            url:'/pages/jewel/order/ordersuccess?order_no='+that.order_no
											        })
											    }, 500)
											}
									        break;
									}
								}
							})
						}
					}
				})
				
			},
			// 记录额外描述
			log_content(e){
				this.order_content = e.target.value;
			},
			// 记录身份证名称
			log_idcardname(e){
				this.idcard_name = e.target.value;
			},
			// 记录身份证号码
			log_idcardnum(e){
				this.idcard_num = e.target.value;
			},
			// 修改创客
			payBtn(){
				let that = this
				if(Number(that.mammonNum) > Number(that.mammonTraffic)){
					uni.showToast({
						icon:'none',
						title:'超过可用流量'
					})
					return false
				}
				this.payPop = !this.payPop;
			},
			//选择置换订单
			chooseOrder(){
				this.showDisplace = !this.showDisplace;
			}
        }
    }
</script>
<style>
    page {
        background: #efefef;
        /*小程序最外层默认有一个page标签*/
    }
    .g-address{
        border-top: 2rpx solid #ddd;
		overflow: hidden;
		height: auto;
    }
    .m-no-address{
        padding-left: 40upx;
        font-size: 30upx;
    }
    .m-address-info{
        width: 100%;
        position: relative;
        padding: 20upx 0;
        background: #ffffff;
    }
    .m-address-info-l{
        width: 600upx;
        margin-left: 40upx;
    }
    .m-address-info-r{
        position: absolute;
        right: 20upx;
        top: 50%;
        transform: translateY(-50%);
    }
    .m-address-info-t{
        display: flex;
        align-items: center;
        height: 40upx;
        margin-bottom: 18upx;
        font-size: 32upx;
    }
    .u-address-name,.u-address-mobile{
        font-weight: bold;
        margin-right: 20rpx;
    }
    .u-address-content{
        font-size: 29upx;
        color: #5f5f5f;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .m-address-bg{
        width: 100%;
        height: 8upx;
		position: relative;
		top: -20rpx;
    }

    .page {
        background: #efefef;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: '微软雅黑'
    }

    .font-color-hs {
        color: #999;
    }

    .addr-box {
        height: auto;
        width: 100%;
        margin-top: 16rpx;
    }

    .addr_bg {
        height: 9rpx;
        width: 100%
    }

    .addr-content {
        width: 95%;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
        padding-top: 31rpx;
        padding-bottom: 10rpx;
    }

    .addr-content .addr-view {
        float: left
    }

    .addr-content image {
        width: 39rpx;
        height: 39rpx;
    }

    .addr-icon {
        padding-top: 19rpx;
        padding-left: 15rpx;
    }

    .addr-icon-none {
        padding-left: 15rpx;
    }

    .addr-list {
        margin-left: 18rpx;
        font-size: 28rpx;
    }

    .addr-info {
        font-size: 25rpx;
        color: #727272;
        margin-top: 20rpx;
        margin-bottom: 32rpx;
    }

    .addr-edit {
        float: right !important;
        padding-top: 19rpx;
    }

    .addr-edit-none {
        float: right !important;
    }

    .good-box {
        height: auto;
        width: 100%;
        overflow: hidden;
		background: #FFFFFF;
    }

    .common {
        border-bottom: 1px solid #ddd;
        height: 102rpx;
        width: 100%;
        line-height: 102rpx;
    }

    .content-box {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        font-size: 28rpx;
		margin-bottom: 20rpx;
    }

    .com-name {
        float: left;
    }

    .com-contact {
        float: right;
        color: #666;
		padding-top: 24rpx;
    }

    .com-contact image {
        width: 39rpx;
        height: 39rpx;
        position: relative;
        top: 10rpx;
    }
	
	/* 身份证号码 */
	.idcard{
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		align-items: flex-start;
	}
	.idcard_nickname{
		width: 40%;
		height: 100%;
		margin-right: 5%;
	}
	.idcard_num{
		width: 55%;
		height: 100%;
	}
	.nickname_top{
		line-height: 39rpx;
	}
	.idcard image{
		width: 39rpx;
		height: 39rpx;
		float: left;
		margin-right: 18rpx;
	}
	.nickname_title{
		color: #656565;
		font-size: 28rpx;
		float: left;
		margin-right: 11rpx;
	}
	.nickname_almost{
		color: #f91d1a;
	}
	.idcard_info_input{
		border-bottom: 1px solid #e5e4e4;
		width: 100%;
		height: 69rpx;;
	}
	/* 身份证号码 */
	

    .good {
        height: 246rpx;
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #ddd;
        margin-top: 30rpx;
    }

    .lease-img {
        float: left;
        width: 144rpx;
        height: 192rpx;
        border: 2rpx solid #d8d8d8;
        margin-right: 21rpx;
    }

    .lease-img image {
        width: 100%;
        height: 100%
    }

    .lease-info {
        width: 376rpx;
        float: left;
        font-size: 26rpx;
    }

    .lease-title {
        height: 74rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .lease-attr {
        height: 88rpx;
        overflow: hidden;
        font-size: 24rpx;
        margin-top: 10rpx;
    }

    .lease-price {
        float: right;
        font-size: 26rpx;
    }

    .lease-num {
        margin-top: 14rpx;
    }

    .lease-market-price {
        text-decoration: line-through;
    }

    .package {
        display: inline-block;
        font-size: 26rpx;
    }

	/* 创客 */
	.edit-title{
		display: flex;
		align-items: center;
		background: #ffffff;
		margin-bottom: 20upx;
		padding: 20upx 5%;
	}
	.edit-title .left{
		color: #eb1b1b;
		font-size: 34upx;
	}
	.edit-title .right{
		margin-left: 24upx;
		border-bottom: 1px solid #d9d9d9;
		flex: 1;
		height: 58upx;
	}
	.edit-title .right input{
		height: 58upx;
	}
    .total_price{
        background: #fff;
    }
	.price_box{
		width: 690rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #eee;
	}
	.single_price{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 95%;
		margin: 0 auto;
		height: 54rpx;
	}
	.total_pay{
		height: 60rpx;
		line-height: 60rpx;
		text-align: right;
		width: 690rpx;
		margin: 0 auto;
	}
	.single_price_text{
		font-size: 16px;
		color: #fd6361;
	}
	.pay_type_box{
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		z-index: 10;
		transform: translateY(100%);
		transition: .3s;
	}
	.pay_type_box .pay-title{
		text-align: center;
		color: #313131;
		font-size: 34rpx;
		padding: 30rpx 0;
	}
	.pay_type{
		height: 108rpx;
		line-height: 108rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #2b2b2b;
		border-bottom: 1px solid #f0f0f0;
	}
	.pay_type .left{
		display: flex;
		align-items: center;
	}
	.pay_type .icon_text{
		width: 65rpx;
		height: 65rpx;
		margin: 0 30rpx;
		display: block;
	}
	.pay_type .arrow{
		width: 42rpx;
		height: 42rpx;
		display: block;
		margin-right: 30rpx;
	}
	.wxpay{
		background: #06ba04;
	}
	.jewel_granary{
		background: #fd6361;
	}
	.alipay{
		background: #1b95d4;
	}
	.qian_pay{
		background: #f3970d;
	}
    .input-content {
        width: 100%;
        background: #f5f5f5;
        height: 69rpx;
        border-radius: 7rpx;
        font-size: 25rpx;
        padding-left: 22rpx;
		box-sizing: border-box;
    }
	.pay-btn-bg{
		width: 100%;
		height: 100rpx;
	}
	.pay-btn{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		width: 100%;
		background: #d71311;
		color: #fff;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32upx;
		box-sizing: border-box;
	}
	.z-show {
	    transform: translateY(0) !important;
	}
	.u-popup-mask {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100vw;
	    height: 100vh;
	    background: rgba(0, 0, 0, .5);
	    z-index: 10;
	}
</style>